<template>
    <el-container>
        <el-main>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-card class="box-card" >
                        <div slot="header">
                            <span>菜单树</span>
                        </div>
                        <el-tree
                            :data="menuData"
                            :props="defaultProps"
                            :default-expanded-keys="expandMenu"
                            node-key="id"
                            :expand-on-click-node="false"
                            @node-click="menuSelect"
                            @node-expand="menuExpand"
                            @node-collapse="menuCollapse"
                            >
                            <span class="custom-tree-node" slot-scope="{node, data}" >
                                <span>{{ node.label}}</span>
                                <!--根节点菜单不显示按钮-->
                                <span >
                                    <el-button-group>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-caret-top"
                                                @click="menuSortUpdate(data,data.sort-1,node)"
                                                v-if="data.id != '0'"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-caret-bottom"
                                                @click="menuSortUpdate(data,data.sort+1,node)"
                                                v-if="data.id != '0'"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                @click.stop="menuAdd(data)"
                                                icon="el-icon-circle-plus"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-delete-solid"
                                                v-if="data.id != '0'"
                                                @click="menuDelete(data)"
                                                style="color: #f56c6c"
                                        >
                                        </el-button>
                                    </el-button-group>
                                </span>
                            </span>
                        </el-tree>
                    </el-card>

                </el-col>
                <el-col :span="18">
                    <el-card class="box-card" >
                        <div slot="header">
                            <span>菜单信息编辑</span>
                        </div>

                        <el-form
                                ref="menuEditForm"
                                :model="menuEditForm"
                                label-width="80px"
                                label-position="right"
                                size="mini"
                                style="width: 600px"
                                :rules="rules"
                        >
                            <el-form-item label="id" prop="id" v-show="false">
                                <el-input v-model="menuEditForm.id" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="菜单名称" prop="menuName">
                                <el-input v-model="menuEditForm.menuName" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="url" prop="url">
                                <el-input v-model="menuEditForm.url" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="图标" prop="icon">
                                <el-input v-model="menuEditForm.icon" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="是否可用" prop="status">
                                <dict-select
                                        code-name="status"
                                        :dict-value.sync="menuEditForm.status"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateMenu" :disabled="!menuCanEdit">保存菜单</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import {getMenuTree,addMenu,getMenu,deleteMenu,updateMenu,updateSort} from "@/api/menu";
import {defaultQueryPage,defaultResultPage} from "@/lib/QueryPageUtil";
import DictSelect from "@/components/SysDictSelect";
export default {
    name: "MenuManager",
    components:{
        DictSelect
    },
    data(){
        return {
            //菜单树展开数据
            expandMenu:['0'],
            //菜单树数据
            menuData:[],
            //菜单树定义
            defaultProps:{
              children:"children",
              label:'menuName',
              isLeaf:'isLeaf'
            },
            //菜单是否可编辑
            menuCanEdit:false,
            //菜单编辑信息
            menuEditForm:{
                id:null,
                menuName:null,
                url:null,
                icon:null,
                status:null
            },
            rules:{
                id:[
                    {required:true,message:"id不能为空",trigger:"blur"}
                ],
                menuName:[
                    {required:true,message:"菜单名称不能为空",trigger:"blur"}
                ],
                status:[
                    {required:true,message:"是否可用不能为空",trigger:"change"}
                ]

            },
            menuPage:defaultQueryPage()
        }
    },
    mounted(){
        this.getMenuTree()
    },
    methods:{
        //加载菜单树
        getMenuTree(){
            getMenuTree()
                .then(res => {
                    this.menuData = res.data
                }).catch(err => {
                this.$message.error(err.message)
            })
        },
        menuSelect(data,node){
            if(data.id === "0"){
                this.menuCanEdit = true
                this.$message.warning("根菜单不能被修改！")
                return;
            }
            let getData = {menuId:data.id}
            getMenu(getData)
                .then(res =>{
                    this.$refs.menuEditForm.resetFields()
                    this.menuCanEdit = true
                    this.menuEditForm = res.data
                }).catch(err =>{
                    this.$message.error(err.message)
            })

        },
        //菜单排序更新
        menuSortUpdate(data,newSort,node){
            let menuSortData = {id:data.id,oldSort:data.sort,newSort:newSort,level:data.level}
            updateSort(menuSortData)
                .then(res => {
                    this.$message.success(data.menuName+"更新排序成功")
                    //更新成功后重新查询菜单信息
                    this.getMenuTree();
                }).catch(err => {
                    this.$message.error(err.message)
            })
        },
        //菜单新增
        menuAdd(data){
            //获取当前菜单节点的ID，作为父节点Id
            let menuAddData ={menuPid:data.id}
            addMenu(menuAddData)
                .then(res =>{
                    this.$message.success("节点新增成功！")
                    //新增成功后重新查询菜单信息
                    this.getMenuTree();
                }).catch(err => {
                    this.$message.error(err.message)
            })
        },
        //菜单删除
        menuDelete(data){
            let msg = null
            if(data.isLeaf){
                msg = "是否确认删除【"+data.menuName+"】？"
            }else{
                msg = "当前节点【"+data.menuName+"】下包含子菜单，是否确认全部删除？"
            }
            let deleteData = {menuId:data.id}
            this.$confirm(msg)
                .then(res => {
                    deleteMenu(deleteData)
                        .then(res => {
                            this.$message.success("删除成功！")
                            //删除后，要重置展开的树节点信息，因为不知道展开的信息中是否包含了被删除的节点
                            this.expandMenu = ['0']
                            //重新查询菜单树
                            this.getMenuTree();
                        }).catch(err =>{
                            this.$message.error(err.message)
                    })
                }).catch( _ =>{})

        },
        //菜单被展开时的操作
        menuExpand(data){
            let index = this.expandMenu.indexOf(data.id);
            if(index === -1){
                this.expandMenu.push(data.id)
            }

        },
        menuCollapse(data){
            this.expandMenu = this.expandMenu.filter((value) => value !== data.id)
        },
        //更新菜单信息
        updateMenu(){
            this.$refs.menuEditForm.validate((valid) => {
                if(valid){
                    updateMenu(this.menuEditForm)
                        .then(res =>{
                            this.$message.success("保存成功！")
                            //保存成功后，重新加载菜单信息
                            this.getMenuTree()
                        }).catch(err =>{
                            this.$message.error(err.message)
                    })
                }else {
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>